<template>
  <div class="haishang">
    <div>
      <img class="bg_img" style="width:50vw" />
    </div>
    <div class="haishangn_right" style="width:48vw">
      <div class="haishangn_k">
        <div class="top">
          <div class="title">
            <img src="../../assets/image/patten_tou.png" alt />
            <div>藏馆精品</div>
          </div>
          <div class="more" style="  cursor: pointer;" @click="toMore()">查看更多</div>
        </div>
        <div class="bottom">
          <div class="bottom_k">
            <div style="cursor: pointer;" class="layer_k">
              <div>
                <img @click="todiancang(87,1)" class="img1" alt />
              </div>

              <div class="layer">
                <p>清光绪青花八仙过海图棒槌瓷瓶</p>
              </div>
            </div>
            <div class="right">
              <div class="gq-img-k">
                <img @click="todiancang(160,2)" src="../../assets/image/yuqi.png" class="img2" alt />
              </div>
              <div class="gq-img-k">
                <img
                  @click="todiancang(1084,3)"
                  src="../../assets/image/shuhua.png"
                  class="img3"
                  alt
                />
              </div>
            </div>
          </div>
          <div class="bottom_k2">
            <div>
              <img @click="todiancang(759,4)" class="img4" alt />
            </div>
            <div>
              <img @click="todiancang(4118,5)" class="img5" alt />
            </div>
            <div>
              <img @click="todiancang(133,6)" class="img6" alt />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderId: "",
    };
  },
  created() {},
  methods: {
    toMore() {
      this.$router
        .push({
          path: "/cangpinjiansuo/cangpinjiansuo2/:id",
          query: {
            orderId: 1,

            sort: "8a7aef0958b37e280158b38d781e0033",
          },
        })
        .catch((err) => {
          err;
        });
    },
    todiancang(id, index) {
      this.$router
        .push({
          path: `/cangpinjiansuo/cangpinjiansuodetail?id=${id}`,
          query: {
            orderId: index,
          },
        })
        .catch((err) => {
          err;
        });
    },
    moveover() {
      // this.move.transform='scale(1)'
    },
  },
};
</script>
<style scoped>
.img1 {
  width: 500px;
  height: 401px;
  cursor: pointer;
  background-image: url("../../assets/image/ciqi.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 20px;
}
.img2,
.img3 {
  width: 234px;
  height: 180px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.img2 {
  background-image: url("../../assets/image/yuqi.png");
}
.img3 {
  background-image: url("../../assets/image/shuhua.png");
}
.img4,
.img5,
.img6 {
  width: 240px;
  height: 201px;
  background-image: url("../../assets/image/guji.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-right: 20px;
  cursor: pointer;
}

.img5 {
  background-image: url("../../assets/image/biaoben.png");
}
.img6 {
  background-image: url("../../assets/image/qita.png");
}

.gq-img-k {
  width: 250px;
  height: 180px;
  cursor: pointer;
}
.haishang {
  display: flex;
  width: 100%;
  height: calc(100vh - 149px);
  box-sizing: border-box;
}
.haishangn_right {
  background: rgb(181, 171, 139);
  display: flex;
  overflow: hidden;
  justify-items: center;
}
.haishangn_k {
  margin: auto;
  height: 700px;
  padding: 15px;
}
.haishangn_k .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  width: 100%;
}
.haishangn_k .top .title img {
  margin-right: 10px;
}
.haishangn_k .top .title {
  display: flex;
  color: white;
  font-size: 30px;
}
.haishangn_k .top .more {
  color: white;
}
.haishangn_k .right {
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}

.haishangn_k .bottom_k {
  display: flex;
  justify-content: space-between;
  height: 400px;
  margin-bottom: 45px;
}
.haishangn_k .bottom_k .layer_k {
  position: relative;
}
.haishangn_k .bottom_k .layer {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 500px;
  color: white;
  font-size: 18px;
  box-sizing: border-box;
  background-color: rgba(25, 25, 25, 0.5);
  padding: 0 15px;
}
.haishangn_k .bottom {
  flex-direction: column;
  display: flex;
  justify-content: space-around;
  height: 90%;
}
.haishangn_k .bottom_k2 {
  display: flex;

  width: 700px;
  justify-content: space-between;
}
.haishang .bg_img {
  /* background-position: center; */

  background-image: url("../../assets/image/haishang.png");
  width: 96%;
  height: 100%;
  margin-left: 4%;
  background-size: cover;
}
@media only screen and (min-width: 10px) and (max-width: 1366px) {
  .img1 {
    width: 450px;
    height: 400px;
  }
  .img2,
  .img3 {
    width: 200px;
    height: 180px;
  }
  .img4,
  .img5,
  .img6 {
    width: 190px;
    height: 150px;
  }

  .haishangn_k .bottom_k .layer {
    width: 450px;
    height: 60px;
    font-size: 16px;
  }
  .haishangn_k .top {
    width: 90%;
  }
}
</style>
